<template>
  <div class="home-container">
    <section class="shopcart-page">
      <div class="shopcart-list">
        <shopcart></shopcart>
      </div>
    </section>

    <section class="recommend">
      <div class="recommend-title">
        <van-divider :style="{ borderColor: '#ccc', padding: '0 16px' }"
          >可能你还想要</van-divider
        >
      </div>
      <div class="recommend-list">
         <div
              class="recommend-item"
              v-for="(item, index) in recommendList"
              :key="index"
              @click="$router.push('/product/'+item.id)"
            >
              <img :src="item.imageHost + item.mainImage" />
              <p>
                {{ item.subtitle }}
              </p>
              <i>￥ {{ item.price }}</i>
            </div>
      </div>
    </section>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar";
import Tabbar from "../../components/tabbar.vue";
import shopcartBox from "@/components/shopart-box.vue";
import { getRecommend } from "@/api";
export default {
  components: {
    tabbar,
    Tabbar,
    shopcart: shopcartBox,
  },
  data() {
    return {
    recommendList:[]
    };
  },
  methods: {
    fecthRecommend() {
      getRecommend((res) => {
        this.recommendList = res.data;
      });
    },
  },
  created() {
    this.fecthRecommend();
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.recommend {
  margin-bottom: 100px;
  .recommend-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;

    .recommend-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding: 20px;
      @include boxSizing;
      border-bottom: 1px solid #dcdcdc;

      &:nth-child(2n-1) {
        border-right: 1px solid #dcdcdc;
      }

      img {
        width: 100%;
        height: 290px;
        margin: 0 auto;
      }

      p {
        height: 60px;
        padding: 20px 0;
        font-size: 26px;
        line-height: 40px;
        color: #333;
        overflow: hidden;
      }

      i {
        font-style: normal;
        font-size: 32px;
        color: $red;
      }
    }
  }
}
</style>